<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>排序展示</title>
    <style>
        #container {
            display: flex;
            height: 400px;
            width: 1200px;
            margin: auto;
            padding: 5px;
            border: 1px solid #ababab;
            justify-content: space-between;
            list-style: none;
            /* transform: rotate(180deg); */
            transform: rotateX(180deg);
        }

        #container>li {
            width: 10px;
            background: #89F;
            margin-right: 1px;
        }
    </style>
</head>

<body>
    <ul id="container">
    </ul>
</body>
<script>

    /**
     * div容器DOM对象
     */
    const container = document.getElementById("container");

    let array = [];

    /**
     * 获取[lowerValue,upperValue]的随机数
     * @param {Number} lowerValue
     * @param {Number} upperValue
     */
    function randomFrom(lowerValue, upperValue) {
        return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    }

    /**
     * 初始化
     * 将1-100打乱顺序放入a数组中
     */
    function init() {

        const a = [];

        for (let i = 1; i <= 100; i++) {
            a[i - 1] = i;
        }

        for (var i = 0; i < 100; i++) {
            // 获取随机数，[0,数组长度]，
            const j = randomFrom(0, a.length - 1);
            // 每取一个值，把源长度缩减1（从数组中拿出元素，并将源数组拿出后的空位填补上）
            array[i] = a.splice(j, 1)[0];
        }

        // 目前array数组保存的是随机放入的1-100的数据
        // 使用该数组的成员，创建li标签，li标签的高度是成员的百分比 n%
        for (let i = 0; i < array.length; i++) {
            const li = document.createElement("li");
            // 生成百分之高度，赋值给创建的li标签
            li.style.height = array[i] + '%';
            // 将li标签追加到ul标签中
            container.appendChild(li);
        }
        // 把array标签替换成DOM标签伪数组
        array = container.getElementsByTagName("li");
    }

    // 排序：冒泡排序（同步方法）
    async function compare() {

        function createPromise() {
            return new Promise(reslove => {
                setTimeout(() => {
                    reslove();
                }, 5)
            })
        }

        for (let i = 1; i <= array.length - 1; i++) {
            // 每趟次数
            for (let j = 0; j < array.length - i; j++) {
                if (array[j].offsetHeight > array[j + 1].offsetHeight) {
                    // 每次比较之后，暂停以进行显示
                    await createPromise();
                    let t = array[j].style.height;
                    array[j].style.height = array[j + 1].style.height;
                    array[j + 1].style.height = t;
                }
            }
        }
    }

    init();
    compare();
</script>

</html>